<template>
    <div style="display: inline-block; width: 100%">
        <ul class="k-transfer">
            <li>
                <div class="k-transfer-list">
                    <div v-for="opt in options" :key="opt.value">
                        <el-checkbox :checked="isChecked(opt.value)"
                                     @change="onChange(opt.value, $event)">
                            {{ opt.text }}
                        </el-checkbox>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'KTransfer',
    props: {
        value: [String, Number, Array],
        defaultValue: [String, Number, Array],
        required: Boolean,
        options: Array,
    },
    computed: {
        c: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            }
        }
    },
    methods: {
        isChecked(value) {
            if (!this.c) {
                return false;
            }
            return this.c.indexOf(value) > -1;
        },
        onChange(value, checked) {
            if (checked) {
                if (this.c) {
                    this.c.push(value);
                } else {
                    this.c = [value];
                }
            } else {
                if (this.c) {
                    const idx = this.c.indexOf(value);
                    this.c.splice(idx, 1);
                } else {
                    this.c = [];
                }
            }
        }
    }
}
</script>

<style scoped lang="scss">
.k-transfer {
    display: flex;
    li {
        flex: 1;
        border: solid 1px #efefef;
    }
    h3 {
        margin: 0;
        font-weight: 400;
        background: #f3f3f3;
        padding: 5px 15px;
        color: #999;
        font-size: 14px;
    }
    &-list {
        box-sizing: border-box;
        padding: 10px 15px;
        height: 300px;
        overflow-y: auto;
    }
}
</style>
